<template>
    <el-dialog class="zczyXdRetire" title="中压注册用户退役" :visible.sync="show" v-if="show" width="30%" :before-close="handleCancel" :close-on-click-modal="false" v-dialogDrag>
      <el-form :model="retireForm" ref="retireForm" label-width="110px" :rules="retireFormRules">
        <el-form-item label="用户编码">
          <el-input v-model="yhbm" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="yhmc" disabled></el-input>
        </el-form-item>
        <el-form-item label="退役日期" prop="tcrq">
          <el-date-picker v-model="retireForm.tcrq" type="date" :picker-options="pickerDate" value-format="yyyy-MM-dd" placeholder="请选择" :clearable="false"></el-date-picker>
        </el-form-item>
        <el-form-item label="退役原因" prop="yhms">
          <el-input v-model="retireForm.yhms"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancel">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { retireZczyYh } from '@/api/sjwh/zczy.js';
import { compareDate } from '@/utils/validate.js';
export default {
    data() {
        const that = this
        const checkTcrq = (rule, value, callback) => {
          if (value) {
            if (compareDate(value, that.yh_zcrq)) {                  
              callback()
            } else {
              callback(`用户的退役日期须大于其注册日期${that.yh_zcrq}`)
            }
          } else {
            callback('请选择退役日期')
          }         
        }
        return {
          show: false,
          retireForm: {
            czy: '',
            id: '',
            tcrq: '',
            xdId: '',
            yhms: '',
            yxZytdyhValidYhZxrqVO: {
              dwbm: '',
              yhId: [],
              zxrq: ''
            }
          },
          yhmc: '',
          yhbm: '',
          yh_zcrq: '',
          retireFormRules: {
            tcrq: [
              { required: true, validator: checkTcrq, trigger: 'blur' }
            ]
          },
          pickerDate: { // 退役日期选择不能超过当前日期
            disabledDate: time => {
                return (
                    time.getTime() > new Date()
                );
            }
          }
        }
    },
    props: {
      propRetireData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propRetireData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.show) {
            const that = this
            that.show = newVal.show
            that.retireForm = {
                yhms: '',
                czy: newVal.czy,
                tcrq: '',
                xdId: newVal.xdId,
                id: newVal.id,
                yxZytdyhValidYhZxrqVO: {
                    dwbm: newVal.dwbm,
                    yhId: [newVal.id],
                    zxrq: ''
                }
            }
            that.yhmc = newVal.yhmc
            that.yhbm = newVal.yhbm
            that.yh_zcrq = newVal.zcrq
          }
        }
      }
    },
    methods: {
      /* 取消 */
      handleCancel() {
        const that = this
        that.show = false
        that.retireForm = {
          czy: '',
          id: '',
          tcrq: '',
          xdId: '',
          yhms: '',
          yxZytdyhValidYhZxrqVO: {
            dwbm: '',
            yhId: [],
            zxrq: ''
          }
        }
        that.xdmc = ''
        that.xdbm = ''
      },

      /* 确定 */
      handleSubmit() {
        const that = this
        that.retireForm.yxZytdyhValidYhZxrqVO.zxrq = that.retireForm.tcrq
        that.$refs['retireForm'].validate(async valid => {
          if (valid) {
            let res = await retireZczyYh(that.retireForm)
            if (res.code == 0 && res.data) {
              that.$message.success('中压注册用户退役成功')
              that.handleCancel()
              that.$emit("updateZczyYhTable")
            } else {
              that.$message.error(res.message)
            }
          }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
.zczyXdRetire /deep/ .el-input-number {
  width: 100%;
}
.zczyXdRetire /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.zczyXdRetire /deep/ .el-date-editor.el-input {
    width: 100%;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}    
</style>
